<template>
  <Draggable
    :value="list"
    class="inner-draggable dragArea slot-group"
    :class="{ slot: !list.length, isDrag }"
    :data-slot="`插槽（${slotKey}）\n 拖拽组件到此处`"
    :group="{ name: 'block', put: true }"
    @change="onChange"
  >
    <template v-for="(block, idx) in list">
      <div
        :key="idx"
        class="list-group-item inner"
        :data-label="block.label"
        :class="{
          focus: block.focus,
          focusWithChild: block.focusWithChild
        }"
        @contextmenu.stop.prevent="onContextmenuBlock($event, block, slotChildren)"
        @mousedown.stop="selectComp(block)"
      >
        <Block
          :element="block"
          :style="{
            pointerEvents: Object.keys(block.props.slots || {}).length ? 'auto' : 'none'
          }"
        >
          <template v-for="(value, key) in (block.props.slots || [])"  #[key]>
            <BlockSlot
            :key="key"
              :children="value.children"
              :drag="isDrag"
              :slot-key="key"
              :on-contextmenu-block="onContextmenuBlock"
              :select-comp="selectComp"
            />
          </template>
        </Block>
      </div>
    </template>
  </Draggable>
</template>

<script>
import Draggable from "vuedraggable";
import Block from "../Block";
import { mapState, mapMutations } from "vuex";

export default {
  name: "BlockSlot",
  components: {
    Draggable,
    Block,
  },
  data() {
    return {
      isDrag: false,
    };
  },
  computed: {
    ...mapState("editor", ["curPage", "curBlocks"]),
  },
  mounted() {
    console.log("mounted", this.list);
  },
  props: {
    slotKey: {
      type: String,
      default: "",
    },
    drag: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    selectComp: {
      type: Function,
      required: true,
    },
  },
  methods: {
    ...mapMutations("editor", ["setBlock", "setBlockFocus"]),
    onChange(e) {
      // 左侧拖进来
      // if (e.added) {
      //     const {
      //         newIndex,
      //         element,
      //     } = e.added
      //     this.setBlock({ block: element, type: 'add', newIndex, });
      //     console.log(element, e)
      //     return;
      // }
      // // 中间移动 block排序
      // if (e.moved) {
      //     const {
      //         newIndex,
      //         oldIndex,
      //         element,
      //     } = e.moved;
      //     this.setBlock({ block: element, type: 'move', newIndex, oldIndex});
      // }
    },
    onFocus(block) {
      this.setBlockFocus(block.uuid);
    },
    onContextmenuBlock() {},
  },
};
</script>

<style lang="scss" scoped>
@import "../../mixins.scss";

.inner-draggable {
  position: relative;
}
.slot-group {
  min-height: 40px;
  width: 100%;
  &.isDrag:not(.no-child) :deep(.list-group-item.has-slot) {
    @include showContainerBorder;
  }
}
.inner-draggable.slot::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: auto;
  min-height: 40px;
  font-size: 12px;
  color: #8591a2;
  text-align: center;
  background: rgba(246, 247, 249, 0.5);
  content: attr(data-slot);
  outline: 1px dashed #dedede;
  outline-offset: -1px;
  flex-direction: column;
  justify-content: center;
}

.list-group-item {
  position: relative;
  padding: 3px;
  cursor: move;

  &.focusWithChild {
    @include showContainerBorder;
  }

  &.focus {
    @include showSoliOutline;

    &::after {
      @include showCompLabel(top);

      opacity: 0;
      transition: opacity 0.2s;
    }

    &:hover::after {
      opacity: 1;
    }
  }
}
</style>